<template>
  <div class="hello" id="myChalk" :style="{minHeight: currHeight + 'px'}">
    <!-- 导航栏 -->
    <div class="navBox">
      <van-nav-bar
      title="我的粉笔"
      left-text="返回"
      right-text="•••"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
    </div>
    <!-- 切换栏 -->
    <div class="switchoverBox">
        <van-tabs @click="onClick">
          <van-tab title="一级粉比(8)">
            <van-grid square>
                <van-grid-item 
                v-for="(item,index) in gridtextlist" 
                :key="index"
                :text="item.text"
                :icon="item.photo"
                />
            </van-grid>
          </van-tab>
          <van-tab title="二级粉比">
              <van-grid square>
                <van-grid-item 
                v-for="(item,index) in gridtextlist" 
                :key="index"
                :text="item.text"
                :icon="item.photo"
                />
            </van-grid>
          </van-tab>
        </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyChalk',
  data () {
    return {
      currHeight:'',
       show: false,
       gridtextlist:[
            {
                text:"女性专区",
                icon:"n",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text: "无醇",
                icon:"w",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"聚会畅想",
                icon:"j",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"关于爱情",
                icon:"g",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"火锅绝配",
                icon:"h",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"套餐推荐",
                icon:"template",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"送礼服务",
                icon:"scoped",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },
            {
                text:"侍酒专区",
                icon:"sh",
                photo:require('../assets/images/我的粉丝&我的代言费/fans.png')
            },   
        ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {

  },
      onClick(name, title) {
    },
    },
  mounted(){
      this.currHeight = document.documentElement.clientHeight
      window.onresize = () => {
          this.currHeight = document.documentElement.clientHeight
      }
  }
}
</script> 

<style scoped lang='less'>
// 大盒子背景图
.hello{
    background: #f3f4f6;
    // height: 100%;
}
// 导航栏
.navBox{
  width: 100%;
  height: 90px;
}
.van-nav-bar__content{
  height: 90px;
  background:rgba(48, 48, 50, );
  line-height: 90px;
  .van-nav-bar__text{
    color: #fff;
  }
  .van-nav-bar__title{
    color: #fff;
  }
  .van-icon{
    color: #fff;
  }
}

</style>
